<template>
	<view class="big-box">
		<view class="head-box common">
			<view class="close-box" @tap="close">取消</view>
			<view class="title">新的好奇</view>
			<view class="close-box active"  @tap="fabu"></view>
		</view>
		<view class="tips-box common" v-if="isTips">
			<view class="tips-title">温馨提示：请不要发布涉黄，广告等违规内容</view>
			<image @tap="tipsClose" src="../../../static/jingjie/delete_h.png" mode=""></image>
		</view>
		<view class="position-box">
			<textarea placeholder="请发布你的好奇" v-model="textInput" maxlength="100" class="viewpoint" @input="descInput">
			</textarea>
			<view class="remnant" v-text="remnant">/100</view>
		</view>
		<view class="class-box">
			<view class="class-title">好奇类别</view>
			<view class="flexBox">
				<view class="common-box" v-for="(item,index) in selectList" :key="index" v-text="item" :class="{active:menuIndex==index}"
				 @tap="selectClass(index,item)"></view>
			</view>
		</view>
		<view class="chargeBox common">
			<view class="charge-title">赏金好奇</view>
			<switch @change="switch1Change" />
		</view>
		<view v-if="isDisplay">
			<view class="chargeBox common">
				<view class="charge-title">悬赏金额</view>
				<view class="number-select common">
					<view class="border-box" @tap="reduce">
						<view class="left-box"></view>
					</view>
					<input class="center-box" type="text" v-model="number" @input="seletInput" />
					<view class="border-box" @tap="add">
						<view class="right-box"></view>
					</view>
				</view>
			</view>
			<view class="tips-font">金额最少10猫币，赏金提问回答效率更高哦</view>
		</view>
		<view class="btn" @tap="fabu">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTips: true,
				textInput: '',
				remnant: 0,
				selectList: [],
				listId: [],
				menuIndex: 0,
				number: 0,
				is_reward: 0,
				isDisplay: false,
				//以下为要提交的数据字段
				className: "",
			};
		},
		onLoad() {
			this.getList()
		},
		watch: {

		},
		methed() {

		},
		methods: {
			tipsClose() {
				this.isTips = false
			},
			descInput() { //控制输入框输入字数
				var txtVal = this.textInput.length;
				this.remnant = 100 - txtVal;
			},
			selectClass(index, item) {
				this.menuIndex = index;
				this.className = item;
			},
			switch1Change: function(e) {
				this.isDisplay = e.target.value;
				console.log(this.isDisplay);
				if (this.isDisplay == true) {
					this.number = 10;
					this.is_reward = 1;
				} else {
					this.number = 0;
					this.is_reward = 0;
				}
				console.log(this.number)
			},
			seletInput() {
				var containSpecial = RegExp(
					/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)(\u4e00-\u9fa5)(A-Za-z)]+/
				);
				if (containSpecial.test(this.number)==true||this.number=="") {
					this.showbtn = false;
					uni.showToast({
						title: '请输入正确的金额',
						icon: 'none'
					})
					this.number = 10;
				}else if (this.number < 10) {
					uni.showToast({
						title: '猫币数不能小于10',
						icon: 'none'
					})
					this.number = '';
					this.number = 10;
				}
			},
			reduce() { //减
				if (this.number == 10) {
					uni.showToast({
						title: '不能再减啦！',
						icon: 'none'
					})
				} else {
					this.number--
				}
			},
			add() { //加
				this.number++
			},
			close() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() { //查询列表
				var data = {
					1: 1,
				};
				var me = this;
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosityclassfiy',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						var datalist = res.data.data;
						var listType = me.selectList.type
						for (var i in datalist) {
							me.selectList.push(datalist[i].type);
							me.listId.push(datalist[i].id);
						}
						console.log(datalist)
						console.log(me.selectList)
						console.log(me.listId)
					}
				})
			},
			fabu() { //添加好奇
				if (this.textInput == '') {
					uni.showToast({
						title: "请输入好奇内容!",
						icon: 'none'
					})
					return false
				}
				var data = {
					content: this.textInput,
					is_reward: this.is_reward, //是否悬赏
					user_id: uni.getStorageSync('user_id'),
					classfiy: this.listId[this.menuIndex],
					more_count: this.number,
				}
				// console.log(data)
				var me = this;
				this.myAjaxNewPost({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title:'提交成功，请等待审核',
								icon:'none'
							})
						}
					},
				})
			}
		}
	}
</script>

<style scoped>
	.big-box {
		width: 100%;
		/* height: 100%; */
		position: relative;
	}

	.head-box {
		width: 100%;
		height: 128upx;
		padding: 0 24upx;
		padding-top: 70upx;
		padding-bottom: 23upx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(230, 230, 230, 1);
	}

	.close-box {
		width: 100upx;
		height: 50upx;
		line-height: 50upx;
		color: rgba(102, 102, 102, 1);
		font-size: 32upx;
	}

	.close-box.active {
		text-align: right;
	}

	.title {
		color: rgba(51, 51, 51, 1);
		font-size: 36upx;
	}

	.tips-box {
		width: 100%;
		height: 54upx;
		background: rgba(255, 251, 181, 1);
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.tips-title {
		font-size: 22upx;
		color: rgba(51, 51, 51, 1);
	}

	.tips-box image {
		width: 19upx;
		height: 19upx;
	}

	.position-box {
		position: relative;
	}

	.viewpoint {
		width: 100%;
		height: 260upx;
		background-color: white;
		padding: 21upx 23upx;
		box-sizing: border-box;
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);

	}

	.remnant {
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);
		position: absolute;
		bottom: 20upx;
		right: 20upx;
	}

	.class-box {
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-top: 30upx;
		padding-bottom: 40upx;
	}

	.class-title {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);

	}

	.flexBox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	

	.common-box {
		width: 140upx;
		height: 58upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(230, 230, 230, 1);
		border-radius: 30upx;
		font-size: 26upx;
		color: rgba(102, 102, 102, 1);
		margin-top: 30upx;
		margin-right: 42upx;
		text-align: center;
		line-height: 58upx;
	}

	.common-box:first-child {
		margin-left: 0;
	}

	.common-box:nth-child(4) {
		margin-right: 0;
	}

	.common-box.active {
		border: 1px solid rgba(70, 206, 207, 1);
		color: rgba(70, 206, 207, 1);
	}

	.chargeBox {
		width: 100%;
		height: 88upx;
		background-color: white;
		padding: 0 24upx;
		box-sizing: border-box;
	}

	.charge-title {
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.number-select {
		width: 170upx;
		height: 48upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(230, 230, 230, 1);
		border-radius: 10upx;
	}

	/*加号*/
	.right-box {
		display: inline-block;
		background: rgba(153, 153, 153, 1);
		height: 24upx;
		position: relative;
		width: 2upx;
	}

	.right-box::after {
		background: rgba(153, 153, 153, 1);
		content: "";
		height: 24upx;
		left: 0;
		position: absolute;
		top: 0;
		width: 2upx;
		transform: rotateZ(90deg)
	}

	.center-box {
		width: 40%;
		height: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: 24upx;
		border-left: 1upx solid rgba(230, 230, 230, 1);
		border-right: 1upx solid rgba(230, 230, 230, 1);
		text-align: center;
	}

	.border-box {
		width: 29.9%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}

	/*减号*/
	.left-box {
		display: inline-block;
		background: rgba(153, 153, 153, 1);
		height: 24upx;
		position: relative;
		width: 2upx;
		transform: rotateZ(90deg);
		text-align: center;
		line-height: 48upx;
	}

	.tips-font {
		width: 100%;
		height: 70upx;
		line-height: 48upx;
		font-size: 20upx;
		color: rgba(153, 153, 153, 1);
		padding: 0 24upx;
		box-sizing: border-box;
	}
	.btn{
		margin-top: 60upx;
	}
</style>
